import React from 'react';
import { Menu } from 'antd';
import { Link, useLocation } from 'react-router-dom';

function useActive(currentPath: string, path: string): string {
  return currentPath === path ? 'ant-menu-item-selected' : '';
}

const Navigation = () => {
  const { pathname } = useLocation();
  const isHome = useActive(pathname, '/');
  const isShop = useActive(pathname, '/shop');
  const isSignIn = useActive(pathname, '/signin');
  const isSignUp = useActive(pathname, '/signup');

  return (
    <Menu mode="horizontal" selectable={false}>
      <Menu.Item key="home" className={isHome}>
        <Link to="/">首页</Link>
      </Menu.Item>
      <Menu.Item key="shop" className={isShop}>
        <Link to="/shop">商城</Link>
      </Menu.Item>
      <Menu.Item key="signin" className={isSignIn}>
        <Link to="/signin">登录</Link>
      </Menu.Item>
      <Menu.Item key="signup" className={isSignUp}>
        <Link to="/signup">注册</Link>
      </Menu.Item>
    </Menu>
  );
};

export default Navigation;
